import { t } from 'i18next'
import React, { useEffect, useState } from 'react'
import dayjs from '@/plugins/dayjs'
import { Wrap, Desc } from './style'
import { StyledBottom } from '../../style'
import { Button } from '@kedacom/react-next'
import { meetingStatus } from '@/api/global/interface'
import Table, { ColumnProps } from '@/components/Table'
import { useRequest } from 'ahooks'
import { fetchSysMsg } from '@/api/manager/helper'
import { ISysMsg } from '@/api/manager/helper/translator'
import { IMeetingInfo } from '@/api/meetingSpace'
import { API_MEETING_PREFIX } from '@/utils/constant'

const PageSize = 10
/** 系统消息 */
const SystemInfo = ({ meetingInfo }: { meetingInfo: IMeetingInfo }) => {
	const [pager, setPager] = useState({ total: 1, page: 1, size: PageSize })
	const [totalList, setTotalList] = useState<ISysMsg[]>([])
	const [tableData, setTableData] = useState<ISysMsg[]>([])
	const [sort, setSort] = useState<'desc' | 'asc'>('asc')
	const Columns: ColumnProps<ISysMsg>[] = [
		{
			dataKey: 'time',
			title: t('时间'),
			sort: sort,
			onSort: (e, sort: 'asc' | 'desc') => {
				setSort(sort)
				setPager((val) => ({ ...val, page: 1 }))
				let flag = sort === 'asc' ? 1 : -1
				const list = totalList.sort((a, b) => (dayjs(a.time).isBefore(dayjs(b.time)) ? -flag : flag))
				setTotalList([...list])
				setTableData(list.slice(0, 10))
			},
		},
		{
			dataKey: 'desc',
			title: t('内容'),
			render: (rowData) => {
				return (
					<Desc>
						{rowData.name !== '' && <span className="info-name">{rowData.name}</span>}
						<span>{rowData.msg}</span>
					</Desc>
				)
			},
		},
	]
	const { run } = useRequest(() => fetchSysMsg(meetingInfo.meetingMoid), {
		manual: true,
		onSuccess: (data) => {
			if (data) {
				setPager({ ...pager, total: data.length, page: 1 })
				let flag = sort === 'asc' ? 1 : -1
				const list = [...data].sort((a, b) => (dayjs(a.time).isBefore(dayjs(b.time)) ? -flag : flag))
				setTotalList(list)
				setTableData(list.slice(0, 10))
			}
		},
	})
	useEffect(() => {
		//会议当前状态只会在最上级请求后变更一次，获取到真实状态后 执行一次初始化，防止请求未获取到时，存在手动点击更新列表的情况
		if (meetingInfo.status) {
			setSort(meetingInfo.status === meetingStatus.BEING ? 'desc' : 'asc')
			setPager({ total: 1, page: 1, size: PageSize })
			run()
		}
	}, [meetingInfo.status])
	const handleChangePage = (pageIndex: number) => {
		setPager((val) => ({ ...val, page: pageIndex }))
		const list = totalList.slice(10 * (pageIndex - 1), 10 * pageIndex)
		setTableData(list)
	}
	const handleExport = () => {
		// window.open(
		// 	`${API_MEETING_PREFIX}/mcc/exportSysMsg?meetingMoid=${meetingInfo.meetingMoid}&isAsc=${sort === 'asc'}`
		// )
		window.open(
			`${API_MEETING_PREFIX}/mcc/${meetingInfo.meetingMoid}/sysmsg/export?is_asc=${sort === 'asc' ? 1 : 0}`
		)
	}
	return (
		<Wrap>
			<div className="system-info-header">
				<Button onClick={handleExport}>{t('导出')}</Button>
			</div>
			<Table
				className="system-info-table"
				height={488}
				tableDataList={tableData}
				columns={Columns}
				showOrderColumn={false}
				showSelectColumn={false}
				pager={pager}
				onPageChange={handleChangePage}
				i18n={{ order: t('序号') }}
				nodata={t('暂无数据')}
			/>
			<StyledBottom />
		</Wrap>
	)
}
export default SystemInfo
